import { Box, Button, FormControl, FormErrorMessage, FormHelperText, FormLabel, Heading, Input, Stack } from "@chakra-ui/react";
import { useState } from "react";
import { useForm } from 'react-hook-form';

interface LoginFormType {
  username: string;
  password: string;
}

const LoginForm = () => {
  const [requesting, setRequesting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<LoginFormType>();

  const onclickLogin = ({username,password}:LoginFormType) => {
    setRequesting(true);
    console.log(username,password)
  };

  return (
    <Box
        maxWidth="400px"
        width="100%"
        padding="6"
        boxShadow="lg"
        borderRadius="md"
        backgroundColor="white"
      >
        <Heading as="h2" size="lg" marginBottom="6" textAlign="center">
          登录
        </Heading>
        <Stack spacing="4">
          <FormControl id="email" isInvalid={!!errors.username}> 
            <FormLabel>电子邮件</FormLabel>
            <Input type="text" placeholder="请输入您的用户名"  {...register('username', { required: '用户名是必填项' })}/>
          </FormControl>
          <FormControl id="password" isInvalid={!!errors.password}>
            <FormLabel>密码</FormLabel>
            <Input type="password" placeholder="请输入您的密码"   {...register('password', {
                  required: '密码是必填项',
                  minLength: { value: 6, message: '密码至少需要6位' },
                })}/>
            {!!errors.password && (
              <FormErrorMessage>密码至少需要6位.</FormErrorMessage>
            )}
          </FormControl>
          <Button  colorScheme="blue"  size={['md', 'md']}  width="100%"    isLoading={requesting} onClick={handleSubmit(onclickLogin)}>
              登录
          </Button>
        </Stack>
      </Box>
  );
};

export default LoginForm;
